app.component("demo-dynamic", {
    template: `
    <div class='demo-dynamic'>
        <button v-for="tab in tabs" class="tab-button" @click="currentTab = tab">{{tab}}</button>

        <!-- 
        动态组件 
        :is="currentTabComponent" 当前要动态渲染的组件名为【currentTabComponent数据对应的组件名】
        正常情况下 切换新的组件时 旧的组件要卸载 新的组件要挂载
        keep-alive包裹动态组件时 再切换组件 组件不会执行卸载/挂载 而是直接调用上一次的渲染缓存
        -->
        <keep-alive>
            <component :is="currentTabComponent"></component>
        </keep-alive>

    </div>
    `,
    data() {
        return {
            tabs: ["home", "posts", "archive"],
            currentTab: "home"
        }
    },
    methods: {},
    computed: {
        /* 依赖的一手数据currentTab只要不变 就使用上一次的 */
        currentTabComponent() {
            return "tab-" + this.currentTab
        }
    }
}
)

/* tab-home */
app.component("tab-home", {
    template: `<div class="demo-tab">Home Component</div>`,
    mounted() {
        console.log("tab-home mounted");
    },
    unmounted() {
        console.log("tab-home unmounted");
    },
})

/* tab-posts */
app.component("tab-posts", {
    data() {
        return {
            posts: [
                {
                    id: 1,
                    title: "嘉豪历险记",
                    content: "讲述了嘉豪森林历险的全过程"
                },
                {
                    id: 2,
                    title: "时间等等",
                    content: "讲述了时间的重要性"
                },
                {
                    id: 3,
                    title: "只有你知道",
                    content: "论述了知心难求"
                },
            ],

            // 当前选中的博文
            selectedPost: null
        }
    },
    template: `<div class="demo-tab">
        <!-- 博文列表 -->
        <ul>
            <li v-for="post in posts" @click="selectedPost = post">{{post.title}}</li>
        </ul>

        <!-- 博客正文 -->
        <div>
            <p>{{selectedPost?selectedPost.content:"爱吧！！"}}</p>
        </div>
    </div>`
})

/* tab-archive */
app.component("tab-archive", {
    template: `<div class="demo-tab">个人中心</div>`
})
